<template>
	<view class="contain">
		<view class="header">
			<view class="">
				<u-search placeholder="搜索物资关键字" v-model="keyword" @search="reverseCouty" :show-action="false" class="header-search"></u-search>
			</view>
			<view class="header-select">
				<view class="select-button u-text-right" @click="selectAndDown">
					<text>筛选</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view :class="hidden?'hidden-selectBox':'selectBox'">
					<view :class="value==index?'selectBoxActive':''"  v-for="(item,index) in select" @click="selectItem(index)">
						{{item}}
						<u-icon name="checkbox-mark" v-if="value==index" class="u-p-l-40 select-u-icon"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="venue">
			<view class="venue-list" v-for="(item,index) in good">
				<view style="position: absolute;top:0;z-index=5;background: -webkit-linear-gradient(left bottom,rgba(179, 217, 237,0),rgba(179, 217, 237,0.5));width: 750rpx;height: 200rpx;"></view>
				<h3>{{item.goodsname}}</h3>
				<!-- <view class="venue-tag"><text>{{item.placetype}}</text></view> -->
				<view class="venue-person-num">
					<text>当前物资剩余数量:{{item.goodsnum}}</text>
				</view>
				<view style="position:absolute;top:130rpx;left: 20rpx;">
					<text>最多允许借用：</text>
					<text style="color:#fc5531">{{item.maxrentnum}}</text>
				</view>
				<button type="default" size="mini" style="float: right;margin-top: 40rpx;margin-right: 30rpx;color: #1CBBB4;border: 1px solid #b3d9ed;" @click="show = true;yuyue(item.goodsid)">预约</button>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="320px" height="450px" border-radius="14">
			<view class="" style="width: 80px;margin: 50rpx auto;text-align: center;">
				<text style="font-weight: 550;font-size: 30rpx;">{{materialname}}预约</text>
			</view>
			<view class="" style="position: relative;top:0rpx">
				<view class="startTimeNews">
					<text>预约时间:</text>
				</view>
				<view class="startTime-body">
					<uni-datetime-picker type="datetime" v-model="startdatetime" :start="startdatetimesingle" :end="startdatetimesingleend" @change="startchange1"/>
				</view>
				<view class="endTimeNews">
					<text>归还时间:</text>
				</view>
				<view class="endTime-body">
					<uni-datetime-picker type="datetime" v-model="enddatetime" :start="enddatetimesingle" :end="enddatetimesingleend" @change="startchange2"/>
				</view>
				<view class="" style="position:absolute;top:310rpx;left: 30rpx;">
					<text>预约数量:</text>
				</view>
				<view class="" style="position:absolute;top:295rpx;left:160rpx;">
					<input v-model="inputvalue" :type="type"  style="width: 130rpx;height: 60rpx;border: 1px solid #e1e4ea; border-radius: 10rpx;padding-left: 20rpx;color: #757575;outline:none;line-height: 60rpx;" placeholder="数量"/>
				</view>
				<view class="" style="position:absolute;top:310rpx;right: 100rpx;">
					<text>剩余数量：</text>
					<text>{{materialcount}}</text>
				</view>
				<view class="" style="position:absolute;top:440rpx;left: 30rpx;">
					<text>预约原因:</text>
				</view>
				<view class="" style="position:absolute;top:425rpx;left:160rpx;">
					<u-input v-model="textareavalue" type="textarea" height="150" maxlength="40" style="border: 1px solid #e1e4ea;border-radius: 10rpx;width:350rpx;padding-left: 20rpx;" :auto-height="autoHeight" />
				</view>
				
			</view>
			<view class="" style="position: absolute;bottom:0;left: 0;width: 250rpx;height: 100rpx;background-color: #dee1e6;color: #727272;text-align: center;line-height: 100rpx;" @click="show=false">
				<text>取消</text>
			</view>
			<view class="" style="position: absolute;bottom:0;right: 0;width: 400rpx;height: 100rpx;background-color: #17d67d;color: #f9f9f9;text-align: center;line-height: 100rpx;" >
				<text @click="zuizhongyuyue">预约</text>
				<u-toast ref="uToast" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				false: false,
				keyword: "",
				value: 0,
				hidden: true,
				show: false,
				inputvalue: '',
				textareavalue:'',
				autoHeight:true,
				type: 'text',
				border: true,
				select:[
					"所有物资",
					"数量充足",
					"暂无储备"
				],
				good:[
				],
				good1:[],
				materialid: 0,
				imgUrl: "",
				materialname: "",
				placetype: "",
				materialcount: 0,
				startdatetimesingle: "",
				startdatetimesingleend: "",
				enddatetimesingle: "",
				enddatetimesingleend: "",
				startdatetime:"",
				enddatetime:"",
				maxrentnum:0
			}
		},
		onLoad() {
			this.good=[];
			this.good1=[];
			this.getAllVenue();
		},
		onTabItemTap(e){
			// // console.log(e);
			this.good=[];
			this.good1=[];
			this.getAllVenue();
		},
		methods: {
			async getAllVenue() {
				const res = await this.$myRequest({
					url: 'GoodsController/queryGoodsByName',
					data:{
						push:1
					}
				})
				// console.log(res)
				// for(var i=0;i<res.data.length;i++){
				// 	if(res.data[i].push==1)
				// 		this.good1.push(res.data[i])
				// 		this.good.push(res.data[i])
				// }
				this.good1=res.data;
				this.good=res.data;
				// console.log(res);
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change(){
				// if(this.value==1){
					
				// 	console.log(333);
				// }
				if(this.value===2){
					// this.getAllVenue();
					for(var i=0;i<this.venue.length;){
						if(this.venue[i].ordernum!==0){
							this.venue.splice(i,1);
						}
						else{
							i++;
						}
					}
					
				}
				else if(this.value===3){
					// 
					for(var i=0;i<this.venue.length;){
						// console.log(this.venue.length);
						if(this.venue.length==1&&this.venue[length-1]==0){
							this.venue=[];
							break;
						}
						if(this.venue[i].ordernum==0){
							this.venue.splice(i,1);
						}
						
						else{
							i++;
						}
					}
				}
			},
			selectAndDown(){
				this.hidden=!this.hidden;
			},
			selectItem(index){
				this.good=JSON.parse(JSON.stringify(this.good1))
				if(index==0){
					this.value=0;
				}
				else if(index==2){
					this.value=2;
					for(var i=0;i<this.good.length;){
						if(this.good[i].goodsnum!==0){
							this.good.splice(i,1);
						}
						else{
							i++;
						}
					}
				}
				else if(index==1){
					this.value=1;
					for(var i=0;i<this.good.length;){
						// console.log(this.venue.length);
						if(this.good.length==1&&this.good[length-1]==0){
							this.good=[];
							break;
						}
						if(this.good[i].goodsnum==0){
							this.good.splice(i,1);
						}
						
						else{
							i++;
						}
					}
				}
				this.hidden=!this.hidden;
			},
			async reverseCouty(){
				console.log(this.keyword);
				const res = await this.$myRequest({
					url: 'GoodsController/queryGoodsByName',
					data:{
						goodsname:this.keyword,
						push:1
					},
					method:"POST"
				})
				// console.log(res)
				// console.log(res)
				this.good1=res.data;
				// console.log(this.good1)
				this.good=res.data;
				// console.log(this.good)
				// console.log(res);
			},
			materialDetails(placeid){
				
			},
			async yuyue(goodsId){
				console.log(goodsId)
				const res=await this.$myRequest({
					url:'GoodsController/queryGoodsById',
					data:{
						goodsid:goodsId
					}
				})
				console.log(res)
				this.materialname = res.data.goodsname;
				this.materialcount=res.data.goodsnum;
				this.materialid=res.data.goodsid;
				// this.getVenueDetails();
				this.startdatetimesingle = this.getTime();
				this.enddatetimesingle = this.getTime();
				this.startdatetime=this.startdatetimesingle;
				this.enddatetime=this.enddatetimesingle;
				this.maxrentnum=res.data.maxrentnum;
			},
			// async getVenueDetails() {
			// 	const res = await this.$myRequest({
			// 		url: '/queryjq/?placeid=' + this.id
			// 	})
			// 	this.venue = res.data;
			// 	this.imgUrl = res.data[0].placepho;
			// 	this.placename = res.data[0].placename;
			// 	this.placetype = res.data[0].placetype;
			// 	// console.log(this.venue);
			// },
			getTime() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var second = date.getSeconds();
				var minute = date.getMinutes();
				if(minute+30<60){
					minute=minute+30;
				}
				else if(minute+30>=60 && hour<23){
					hour=hour+1;
					minute=(minute+30)%60;
				}
				else if(minute+30>=60 && hour==23){
					hour=(hour+1)%23;
					minute=(minute+30)%60;
					day=day+1;
				}
				var day1=this.panduanDay(month,year)
				var day2=this.panduanDay((month+1)%12,year)
				if(day+4<=day1){
					this.startdatetimesingleend=year + "-" + (month<10?('0'+month):(month)) + "-" + ((day+4)<10?('0'+(day+4)):day+4)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					this.enddatetimesingleend=year + "-" + (month<10?('0'+month):(month)) + "-" + ((day+4)<10?('0'+(day+4)):day+4)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					console.log(this.startdatetimesingleend);
				}
				else if(day+4>day1 && month+1<=12){
					this.startdatetimesingleend=year + "-" + ((month+1)<10?('0'+(month+1)):month) + "-" + ((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					this.enddatetimesingleend=year + "-" + ((month+1)<10?('0'+(month+1)):month) + "-" + ((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
				}
				else{
					this.startdatetimesingleend=((year+1)<10?('0'+(year+1)):year+1) + "-" + ((month+1)%12<10?('0'+(month+1)%12):(month+1)%12) + "-" + 
												((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
					this.enddatetimesingleend=((year+1)<10?('0'+(year+1)):year+1) + "-" + ((month+1)%12<10?('0'+(month+1)%12):(month+1)%12) + "-" + 
												((day+4)%day2<10?('0'+((day+4)%day2)):(day+4)%day2)+" "
												+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
				}
				console.log(this.startdatetimesingleend);
				return year + "-" + (month<10?('0'+month):(month)) + "-" + (day<10?('0'+day):day)+" "+(hour<10?('0'+hour):hour)+":"+(minute<10?('0'+minute):minute)+":"+(second<10?('0'+second):second);
			},panduanDay(month,year){
				var months=[0,31,28,31,30,31,30,31,31,30,31,30,31]
				if(year%400==0||(year%4==0&&year%100!=0)){
					month[2]=29;
				}
				return months[month];
			},
			async zuizhongyuyue(){
				if(this.inputvalue==''){
					this.showToast("warning","未填写数量");
					return;
				}
				if(this.textareavalue==''){
					this.showToast("warning","未填写原因")
					return;
				}
				console.log(this.inputvalue);
				if(Number(this.inputvalue)>this.maxrentnum){
					this.showToast("warning","超过最大预约数量")
					return;
				}
				if(Number(this.inputvalue)>this.materialcount){
					this.showToast('warning',"超过剩余物资数量")
				}
				console.log(getApp().globalData.userid)
				const res = await this.$myRequest({
					url:"GoodsappointmentController/addGoodsappointment",
					data:{
						userid: getApp().globalData.userid,
						goodsid:this.materialid,
						starttime:this.startdatetime,
						endtime:this.enddatetime,
						rentnum:this.inputvalue,
						reason:this.textareavalue
					},
					method:"POST"
				})
				// console.log(res);
				if(res.data==1){
					this.showToast('success',"预约成功");
					setTimeout(()=>{
						this.show=false;
					},1500)
				}
				else if(res.data==0){
					this.showToast("success","预约失败");
					// this.show=true;
				}
				// 物资根据物资id进行预约，判断提交数量是否超过现有数量，超过返回0，预约请求提交成功返回1
				//提交信息:预约起始时间，归还时间,预约数量，预约原因。（进入审核，管理员审核成功，审核条变为审核过的代表数字，如1,2...）
			},
			showToast(type,title) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					url: '/pages/user/index'
				})
			},
			startchange1(){
				setTimeout(()=>{
					console.log(this.startdatetime);
					this.enddatetime=this.startdatetime;
					this.enddatetimesingle=this.startdatetime;
				}, 100)
			},
			startchange2(){
				setTimeout(()=>{
					console.log(this.enddatetime);
					this.startdatetimesingleend=this.enddatetime;
				}, 100)
			},
			chongzhi(){
				setTimeout(()=>{
					this.startdatetimesingle = this.getTime();
					this.enddatetimesingle = this.getTime();
					this.startdatetime= this.startdatetimesingle;
					this.enddatetime= this.enddatetimesingle;
				}, 100)
			}
		}
	}
</script>

<style lang="scss">
	page{
		overflow:hidden;
	}
	.contain{
		min-height: 350rpx;
		image{
			width: 100%;
			height: 100rpx;
		}
	}
	.image{
		width: 100rpx;
		height: 100rpx;
	}
	.header {
		margin: 10rpx;
		.header-select {
			position: relative;
			color:#333;
			.select-button{
				margin: 20rpx 0;
				margin-right: 30rpx;
				.u-icon{
					margin-left: 5rpx;
					display: inline-block;
				}
			}
			.selectBox{
				background-color: #fff;
				width: 200rpx;
				position:absolute;
				top:50rpx;
				right: -10rpx;
				z-index: 3;
				border-top: 1px solid $uni-border-color;
				border-left: 1px solid $uni-border-color;
				view{
					height: 60rpx;
					padding-left: 5rpx;
					line-height: 60rpx;
					border-bottom: 1px solid $uni-border-color;
					.select-u-icon{
						border-bottom: none;
					}
				}
				.selectBoxActive{
					color: $u-type-primary;
				}
			}
			.hidden-selectBox{
				display: none;
			}
		}
	}
	.venue{
		.venue-list{
			position: relative;
			width: 750rpx;
			height: 200rpx;
			// background-color: red;
			margin-bottom: 10rpx;
			border-top: 1px solid $uni-border-color;
			border-bottom: 1px solid $uni-border-color;
			h3{
				margin: 30rpx 0 0 20rpx;
			}
			.venue-person-num{
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
		}
	}
	.startTimeNews {
		position: absolute;
		left: 30rpx;
		top: 50rpx;
	}
	
	.endTimeNews {
		position: absolute;
		left: 30rpx;
		top: 180rpx;
	}
	
	.startTime-body {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		width: 450rpx;
	}
	
	.endTime-body {
		position: absolute;
		top: 160rpx;
		right: 30rpx;
		width: 450rpx;
	}
</style>
